<template>
  <div style="padding:0px;margin:0px">
    <el-row :gutter="50">
      <el-col :span="15"
              style="padding-left:10px;margin:0px">
        <h3 style="padding:0px;margin:0px">动态</h3>
        <el-scrollbar>
          <dynamic :detail=recent
                   @showComment="showComment"></dynamic>
        </el-scrollbar>
      </el-col>
      <el-col :span="6">
        <h3 style="padding:0px;margin:0px">评论</h3>
        <el-scrollbar>
          <ul>
            <li v-for="(i,index) in aggree"
                style="list-style-type:none;"
                :key="index">
              <comment v-if="refresh"
                       :comment=i></comment>
            </li>
          </ul>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '../../../axios_config'
import dynamic from './dynamic/dynamic'
import comment from './dynamic/comment'
export default {
  data () {
    return {
      recentAndCommentDtos: {},
      recent: {},
      aggree: 0,
      refresh: true,        //强制刷新子组件
    }
  },
  methods: {
    //查询用户的所有动态
    findDynamic () {
      http.get("http://192.168.11.18:8080/user/selectUserPublishRecent")
        .then(res => {
          console.log(res.data.data);
          this.recent = res.data.data;
          this.recentAndCommentDtos = res.data.data.recentAndCommentDtos;
          console.log(this.recent);
          //强制刷新
          this.refresh = false;
          this.$nextTick(() => {
            this.refresh = true;
          });
        });
    },
    //继续加载
    load () {
    },
    showComment (recentComment) {
      this.aggree = [];
      this.aggree = recentComment;
      console.log(recentComment);
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    },
    //发表动态
    publishDynamic () {
      console.log("发表评论");
    }
  },

  mounted () {
    this.findDynamic();
  },
  components: {
    dynamic,
    comment
  }

}
</script>

<style scoped>
.d {
  border-top: 1px solid #000;
}
</style>